import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Select, Button, notification, Modal, Tag, Tooltip, Row, Col, Card } from 'antd';
import { getInfo, editInfo } from '@/services/dataCenter';
import styles from '../style.less';
import { relationRedo, getInputRelations, relationNotExists } from '@/utils/utils'
import { createAndDownloadFile } from '@/utils/utils'
import { baseUrl } from '@/utils/config.js'
import {element} from "prop-types";


class Export extends React.Component {
  constructor(argus) {
    super(argus);

        this.state = {
          exportList:[
            // {
            //   'id':1,
            //   'title':'kgd',
            //   'describe':'主要用于在图谱平台可以直接导入构建图谱'
            // },
            {
              'id':2,
              'title':'json',
              'describe':'可以作为已标注数据集，在其它数据集中上传',
            },
            {
              'id':3,
              'title':'配置信息',
              'describe':'主要用于在其它数据集中的配置中导入'
            }
          ],
          loading:{
            'json':false,
            '配置信息':false
          }
        };
    }

  componentDidMount() {
  }
  infoToParent(key) {
    this.props.callBack(key);
  }

  onClickButtonExportFile(title){
    const {exportId,exportName, } = this.props
    var that = this;
    const { loading} = this.state
    loading[title] = true
    this.setState({loading})
    var url = ''
    var fileName = ''
    if(title ==='配置信息'){
      url = `${baseUrl}/nlp/datacenter/dataset/label/file?dataSetId=${exportId}`
    }else {
      url = `${baseUrl}/nlp/datacenter/dataset/files?data_set_id=${exportId}&fileType=${title}`
    }
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    //设置请求头参数的方式,如果没有可忽略此行代码
    xhr.setRequestHeader("Authorization", 'Bearer ' + sessionStorage.getItem("idToken"));
    //设置响应类型为 blob
    xhr.responseType = 'blob';
    //关键部分
    xhr.onload = function (e) {
      //如果请求执行成功
      if (this.status == 200) {
        loading[title] = false
        that.setState({loading})
        var blob = this.response;
        var a = document.createElement('a');
        // blob.type = "application/octet-stream";
        var url = window.URL.createObjectURL(blob);
        if (window.navigator.msSaveBlob) {
          try {
            window.navigator.msSaveBlob(blob, decodeURIComponent(xhr.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1]))
          } catch (e) {
            console.log(e);
          }
        } else {
          a.href = url;
          a.download = decodeURIComponent(xhr.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1]);
          document.body.appendChild(a); // 火狐浏览器 必须把元素插入body中
          a.click();
          document.body.removeChild(a);
          //释放之前创建的URL对象
          window.URL.revokeObjectURL(url);
        }
      }
    };
    //发送请求
    xhr.send();
  }

  render() {
    const { isShowExportFile } = this.props;
    const { loading } = this.state;
    return (<span>
            <Modal
              title="导出"
              maskClosable={false}
              visible={isShowExportFile}
              width={640}
              onCancel={this.infoToParent.bind(this, false)}
              footer={null}
              centered={true}
            >
              <div>
              {
                this.state.exportList.map(item=>{
                  return <div className={styles.exportList} key={item.title}>
                    <div className={styles.exportContent}>
                      <div className={styles.exportFont}>{item.title}</div>
                      <div>{item.describe}</div>
                    </div>
                    <Button type="primary" className={styles.exportButton} onClick={this.onClickButtonExportFile.bind(this,item.title)} loading={loading[item.title]}>导出</Button>
                  </div>
                })
              }
              </div>
            </Modal>
        </span>
    );
  }
}

const ExportFile = Form.create()(Export);

export default ExportFile;
